





<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>生产管理</el-breadcrumb-item>
      <el-breadcrumb-item>新增生产订单</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 基础信息 -->
    <el-card class="mt-2">
      <h3>基础信息</h3>
      <el-form :model="orderInfo" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="生产订单号">
              <el-input v-model="orderInfo.orderNumber" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户">
              <el-input v-model="orderInfo.customer" placeholder="客户名称/编码">
                <el-button slot="append" icon="el-icon-search"></el-button>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="销售单号">
              <el-input v-model="orderInfo.salesNumber" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="优先级">
              <el-select v-model="orderInfo.priority" placeholder="请选择">
                <el-option label="高" value="high"></el-option>
                <el-option label="中" value="medium"></el-option>
                <el-option label="低" value="low"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input type="textarea" v-model="orderInfo.notes" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 产品信息 -->
    <el-card class="mt-2">
      <h3>产品信息</h3>
<!--      <el-button type="primary" @click="addProduct">添加产品</el-button>-->
      <el-table :data="products" style="width: 100%" class="mt-2">
        <el-table-column prop="index" label="序号" width="60">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="code" label="产品编码"></el-table-column>
        <el-table-column prop="name" label="产品名称"></el-table-column>
        <el-table-column prop="spec" label="规格"></el-table-column>
        <el-table-column prop="unit" label="计量单位" width="100"></el-table-column>
        <el-table-column label="计划产量" width="160">
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.plannedQuantity" :min="1"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="交付日期" width="160">
          <template slot-scope="scope">
            <el-date-picker v-model="scope.row.deliveryDate" type="date" placeholder="请选择日期"></el-date-picker>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" @click="removeProduct(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>




    <!-- 操作按钮 -->
    <div class="bottom-buttons">
      <el-button  @click="cancel" >取消</el-button>
      <el-button type="primary" @click="saveOrder">保存</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orderInfo: {
        orderNumber: '',
        customer: '',
        salesNumber: '',
        priority: '',
        notes: ''
      },
      products: [
        { code: 'GB840', name: '电子挂钟', spec: '40mm', unit: '件', plannedQuantity: 30, deliveryDate: '' },
        { code: 'GB841', name: '电子手表', spec: '40mm', unit: '件', plannedQuantity: 30, deliveryDate: '' },
        { code: 'GB842', name: '机械手表', spec: '40mm', unit: '件', plannedQuantity: 30, deliveryDate: '' }
      ]
    };
  },
  methods: {
    addProduct() {
      this.products.push({ code: '', name: '', spec: '', unit: '件', plannedQuantity: 1, deliveryDate: '' });
    },
    removeProduct(index) {
      this.products.splice(index, 1);
    },
 //返回上一页
    cancel() {
      this.$router.push('/plan');
    },
        saveOrder() {
      console.log('保存订单');
          location.href = '/plan'
        }
  }
}
</script>

<style>
.mt-2 {
  margin-top: 20px;
}
.bottom-buttons {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>




<!--<template>-->
<!--  <div class="app-container">-->
<!--    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">-->
<!--      <el-form-item label="产品编码" prop="productCode">-->
<!--        <el-input-->
<!--          v-model="queryParams.productCode"-->
<!--          placeholder="请输入产品编码"-->
<!--          clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="产品名称" prop="productName">-->
<!--        <el-input-->
<!--          v-model="queryParams.productName"-->
<!--          placeholder="请输入产品名称"-->
<!--          clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="规格" prop="specification">-->
<!--        <el-input-->
<!--          v-model="queryParams.specification"-->
<!--          placeholder="请输入规格"-->
<!--          clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="计量单位" prop="unit">-->
<!--        <el-input-->
<!--          v-model="queryParams.unit"-->
<!--          placeholder="请输入计量单位"-->
<!--          clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="计划产量" prop="plannedQuantity">-->
<!--        <el-input-->
<!--          v-model="queryParams.plannedQuantity"-->
<!--          placeholder="请输入计划产量"-->
<!--          clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="交付日期" prop="deliveryDate">-->
<!--        <el-date-picker clearable-->
<!--          v-model="queryParams.deliveryDate"-->
<!--          type="date"-->
<!--          value-format="yyyy-MM-dd"-->
<!--          placeholder="请选择交付日期">-->
<!--        </el-date-picker>-->
<!--      </el-form-item>-->
<!--      <el-form-item>-->
<!--        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>-->
<!--        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>-->
<!--      </el-form-item>-->
<!--    </el-form>-->

<!--    <el-row :gutter="10" class="mb8">-->
<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          type="primary"-->
<!--          plain-->
<!--          icon="el-icon-plus"-->
<!--          size="mini"-->
<!--          @click="handleAdd"-->
<!--          v-hasPermi="['order:give:add']"-->
<!--        >新增</el-button>-->
<!--      </el-col>-->
<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          type="success"-->
<!--          plain-->
<!--          icon="el-icon-edit"-->
<!--          size="mini"-->
<!--          :disabled="single"-->
<!--          @click="handleUpdate"-->
<!--          v-hasPermi="['order:give:edit']"-->
<!--        >修改</el-button>-->
<!--      </el-col>-->
<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          type="danger"-->
<!--          plain-->
<!--          icon="el-icon-delete"-->
<!--          size="mini"-->
<!--          :disabled="multiple"-->
<!--          @click="handleDelete"-->
<!--          v-hasPermi="['order:give:remove']"-->
<!--        >删除</el-button>-->
<!--      </el-col>-->
<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          type="warning"-->
<!--          plain-->
<!--          icon="el-icon-download"-->
<!--          size="mini"-->
<!--          @click="handleExport"-->
<!--          v-hasPermi="['order:give:export']"-->
<!--        >导出</el-button>-->
<!--      </el-col>-->
<!--      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>-->
<!--    </el-row>-->

<!--    <el-table v-loading="loading" :data="giveList" @selection-change="handleSelectionChange">-->
<!--      <el-table-column type="selection" width="55" align="center" />-->
<!--      <el-table-column label="序号" align="center" prop="giveId" />-->
<!--      <el-table-column label="产品编码" align="center" prop="productCode" />-->
<!--      <el-table-column label="产品名称" align="center" prop="productName" />-->
<!--      <el-table-column label="规格" align="center" prop="specification" />-->
<!--      <el-table-column label="计量单位" align="center" prop="unit" />-->
<!--      <el-table-column label="计划产量" align="center" prop="plannedQuantity" />-->
<!--      <el-table-column label="交付日期" align="center" prop="deliveryDate" width="180">-->
<!--        <template slot-scope="scope">-->
<!--          <span>{{ parseTime(scope.row.deliveryDate, '{y}-{m}-{d}') }}</span>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">-->
<!--        <template slot-scope="scope">-->
<!--          <el-button-->
<!--            size="mini"-->
<!--            type="text"-->
<!--            icon="el-icon-edit"-->
<!--            @click="handleUpdate(scope.row)"-->
<!--            v-hasPermi="['order:give:edit']"-->
<!--          >修改</el-button>-->
<!--          <el-button-->
<!--            size="mini"-->
<!--            type="text"-->
<!--            icon="el-icon-delete"-->
<!--            @click="handleDelete(scope.row)"-->
<!--            v-hasPermi="['order:give:remove']"-->
<!--          >删除</el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--    </el-table>-->
<!--    -->
<!--    <pagination-->
<!--      v-show="total>0"-->
<!--      :total="total"-->
<!--      :page.sync="queryParams.pageNum"-->
<!--      :limit.sync="queryParams.pageSize"-->
<!--      @pagination="getList"-->
<!--    />-->

<!--    &lt;!&ndash; 添加或修改产品信息对话框 &ndash;&gt;-->
<!--    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>-->
<!--      <el-form ref="form" :model="form" :rules="rules" label-width="80px">-->
<!--        <el-form-item label="产品编码" prop="productCode">-->
<!--          <el-input v-model="form.productCode" placeholder="请输入产品编码" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="产品名称" prop="productName">-->
<!--          <el-input v-model="form.productName" placeholder="请输入产品名称" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="规格" prop="specification">-->
<!--          <el-input v-model="form.specification" placeholder="请输入规格" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="计量单位" prop="unit">-->
<!--          <el-input v-model="form.unit" placeholder="请输入计量单位" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="计划产量" prop="plannedQuantity">-->
<!--          <el-input v-model="form.plannedQuantity" placeholder="请输入计划产量" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="交付日期" prop="deliveryDate">-->
<!--          <el-date-picker clearable-->
<!--            v-model="form.deliveryDate"-->
<!--            type="date"-->
<!--            value-format="yyyy-MM-dd"-->
<!--            placeholder="请选择交付日期">-->
<!--          </el-date-picker>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--      <div slot="footer" class="dialog-footer">-->
<!--        <el-button type="primary" @click="submitForm">确 定</el-button>-->
<!--        <el-button @click="cancel">取 消</el-button>-->
<!--      </div>-->
<!--    </el-dialog>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import { listGive, getGive, delGive, addGive, updateGive } from "@/api/order/give";-->

<!--export default {-->
<!--  name: "Give",-->
<!--  data() {-->
<!--    return {-->
<!--      // 遮罩层-->
<!--      loading: true,-->
<!--      // 选中数组-->
<!--      ids: [],-->
<!--      // 非单个禁用-->
<!--      single: true,-->
<!--      // 非多个禁用-->
<!--      multiple: true,-->
<!--      // 显示搜索条件-->
<!--      showSearch: true,-->
<!--      // 总条数-->
<!--      total: 0,-->
<!--      // 产品信息表格数据-->
<!--      giveList: [],-->
<!--      // 弹出层标题-->
<!--      title: "",-->
<!--      // 是否显示弹出层-->
<!--      open: false,-->
<!--      // 查询参数-->
<!--      queryParams: {-->
<!--        pageNum: 1,-->
<!--        pageSize: 10,-->
<!--        productCode: null,-->
<!--        productName: null,-->
<!--        specification: null,-->
<!--        unit: null,-->
<!--        plannedQuantity: null,-->
<!--        deliveryDate: null-->
<!--      },-->
<!--      // 表单参数-->
<!--      form: {},-->
<!--      // 表单校验-->
<!--      rules: {-->
<!--      }-->
<!--    };-->
<!--  },-->
<!--  created() {-->
<!--    this.getList();-->
<!--  },-->
<!--  methods: {-->
<!--    /** 查询产品信息列表 */-->
<!--    getList() {-->
<!--      this.loading = true;-->
<!--      listGive(this.queryParams).then(response => {-->
<!--        this.giveList = response.rows;-->
<!--        this.total = response.total;-->
<!--        this.loading = false;-->
<!--      });-->
<!--    },-->
<!--    // 取消按钮-->
<!--    cancel() {-->
<!--      this.open = false;-->
<!--      this.reset();-->
<!--    },-->
<!--    // 表单重置-->
<!--    reset() {-->
<!--      this.form = {-->
<!--        giveId: null,-->
<!--        productCode: null,-->
<!--        productName: null,-->
<!--        specification: null,-->
<!--        unit: null,-->
<!--        plannedQuantity: null,-->
<!--        deliveryDate: null-->
<!--      };-->
<!--      this.resetForm("form");-->
<!--    },-->
<!--    /** 搜索按钮操作 */-->
<!--    handleQuery() {-->
<!--      this.queryParams.pageNum = 1;-->
<!--      this.getList();-->
<!--    },-->
<!--    /** 重置按钮操作 */-->
<!--    resetQuery() {-->
<!--      this.resetForm("queryForm");-->
<!--      this.handleQuery();-->
<!--    },-->
<!--    // 多选框选中数据-->
<!--    handleSelectionChange(selection) {-->
<!--      this.ids = selection.map(item => item.giveId)-->
<!--      this.single = selection.length!==1-->
<!--      this.multiple = !selection.length-->
<!--    },-->
<!--    /** 新增按钮操作 */-->
<!--    handleAdd() {-->
<!--      this.reset();-->
<!--      this.open = true;-->
<!--      this.title = "添加产品信息";-->
<!--    },-->
<!--    /** 修改按钮操作 */-->
<!--    handleUpdate(row) {-->
<!--      this.reset();-->
<!--      const giveId = row.giveId || this.ids-->
<!--      getGive(giveId).then(response => {-->
<!--        this.form = response.data;-->
<!--        this.open = true;-->
<!--        this.title = "修改产品信息";-->
<!--      });-->
<!--    },-->
<!--    /** 提交按钮 */-->
<!--    submitForm() {-->
<!--      this.$refs["form"].validate(valid => {-->
<!--        if (valid) {-->
<!--          if (this.form.giveId != null) {-->
<!--            updateGive(this.form).then(response => {-->
<!--              this.$modal.msgSuccess("修改成功");-->
<!--              this.open = false;-->
<!--              this.getList();-->
<!--            });-->
<!--          } else {-->
<!--            addGive(this.form).then(response => {-->
<!--              this.$modal.msgSuccess("新增成功");-->
<!--              this.open = false;-->
<!--              this.getList();-->
<!--            });-->
<!--          }-->
<!--        }-->
<!--      });-->
<!--    },-->
<!--    /** 删除按钮操作 */-->
<!--    handleDelete(row) {-->
<!--      const giveIds = row.giveId || this.ids;-->
<!--      this.$modal.confirm('是否确认删除产品信息编号为"' + giveIds + '"的数据项？').then(function() {-->
<!--        return delGive(giveIds);-->
<!--      }).then(() => {-->
<!--        this.getList();-->
<!--        this.$modal.msgSuccess("删除成功");-->
<!--      }).catch(() => {});-->
<!--    },-->
<!--    /** 导出按钮操作 */-->
<!--    handleExport() {-->
<!--      this.download('order/give/export', {-->
<!--        ...this.queryParams-->
<!--      }, `give_${new Date().getTime()}.xlsx`)-->
<!--    }-->
<!--  }-->
<!--};-->
<!--</script>-->
